import { _decorator, Button, Component, Node, ProgressBar, Slider } from 'cc';
import { DialogDef, UIManager } from './UIManager';
import { Setting } from '../config/Setting';
const { ccclass, property } = _decorator;

@ccclass('UISetting')
export class UISetting extends Component {
    private sliderBgmVolume: Slider = null
    private progressbarBgmVolume: ProgressBar = null
    private sliderSfxVolume: Slider = null
    private progressbarSfxVolume: ProgressBar = null


    start() {
        const btn = this.node.getChildByName('BtnClosed')
        btn.on(Button.EventType.CLICK, this.onSettingClosed, this)

        this.sliderBgmVolume = this.node.getChildByName('Bgm').getComponent(Slider)
        this.progressbarBgmVolume = this.node.getChildByPath('Bgm/ProgressBar').getComponent(ProgressBar)
        this.sliderBgmVolume.node.on('slide', this.onBgmVolumeChanged, this)

        this.sliderSfxVolume = this.node.getChildByName('Sfx').getComponent(Slider)
        this.progressbarSfxVolume = this.node.getChildByPath('Sfx/ProgressBar').getComponent(ProgressBar)
        this.sliderSfxVolume.node.on('slide', this.onSfxVolumeChanged, this)

        this.sliderBgmVolume.progress = Setting.instance.bgmVolume
        this.sliderSfxVolume.progress = Setting.instance.sfxVolume

        this.progressbarBgmVolume.progress = Setting.instance.bgmVolume
        this.progressbarSfxVolume.progress = Setting.instance.sfxVolume
    }

    private onBgmVolumeChanged(value: Slider) {
        this.progressbarBgmVolume.progress = value.progress
        Setting.instance.bgmVolume = value.progress
    }

    private onSfxVolumeChanged(value: Slider) {
        this.progressbarSfxVolume.progress = value.progress
        Setting.instance.sfxVolume = value.progress
    }

    private onSettingClosed() {
        UIManager.instance.closeDialog()
    }
}


